<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Programmable Track Cursor</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Programmable Track Cursor</p>
<hr class="separator">
<p class="heading1aa">Introduction</p><div class="content">
For web applications, ChartDirector Programmable Track Cursor is implemented by drawing the track cursor on the browser side with Javascript. For example, drawing a horizontal line and a vertical line will create a crosshair cursor. The drawing is typically performed in a <a href="JsChartViewer.MouseMovePlotArea.htm">JsChartViewer.MouseMovePlotArea</a> event handler so that the track cursor follows the mouse cursor. It is also possible to draw the track cursor at other times. For example, one may program the track cursor so that it is movable by arrow keys. In a realtime chart, the track cursor can be programmed to sweep through the chart as new data points are added.
</div><p class="heading1a">Javascript Chart Model</p><div class="content">
To draw track cursors on the browser side, certain chart configuration (such as the position and size of the plot area, the axis scale of all axes, the data values, etc) needs to be accessible on the browser side. In ChartDirector, this is achieved by using the <a href="jschartmodel.htm">Javascript Chart Model</a>.<br><br>
To set up the Javascript Chart Mode, <a href="BaseChart.getJsChartModel.htm">BaseChart.getJsChartModel</a> can be used on the server side to generate a data structure containing the chart configuration. The data structure can then be passed to the WebChartViewer using <a href="WebChartViewer.setChartModel.htm">WebChartViewer.setChartModel</a> , which will send it to the browser. On the browser side, the <a href='JsChartViewer.htm'>Javascript Chart Viewer</a> will use the data structure to construct Javascript objects representing the chart. These objects can be accessed using <a href="JsChartViewer.getChart.htm">JsChartViewer.getChart</a>.
</div><p class="heading1a">Track Cursor Events</p><div class="content">
By far the most common usage of track cursor is when the mouse is moving over the plot area of an <a href="XYChart.htm">XYChart</a>. On touch enabled devices, the touch point can also be used. To implement these behaviour, the code can handle suitable mouse and touch events and draw the track cursor. The most common used events are:<br><br>
<ul> <li><a href="JsChartViewer.MouseMovePlotArea.htm">MouseMovePlotArea</a>: This event occurs when the mouse moves over the plot area.<br><br>
<li><a href="JsChartViewer.TouchStartPlotArea.htm">TouchStartPlotArea</a>: This event occurs when the a touch interaction starts on the plot area.<br><br>
<li><a href="JsChartViewer.TouchMovePlotArea.htm">TouchMovePlotArea</a>: This event occurs when the a touch swipe occurs on the plot area. </ul>
A special feature of these plot area events is that it occurs even if the mouse or touch interaction is slightly outside the plot area, in which case <a href="JsChartViewer.getPlotAreaMouseX.htm">JsChartViewer.getPlotAreaMouseX</a> and <a href="JsChartViewer.getPlotAreaMouseY.htm">JsChartViewer.getPlotAreaMouseY</a> will report as if the interaction is still on the edge of the plot area. This feature allows the user to easily position the track cursor on the edge of the plot area, at which the latest data points are often located. The margin around the plot area that would still trigger plot area events is configurable using <a href="JsChartViewer.setPlotAreaMouseMargin.htm">JsChartViewer.setPlotAreaMouseMargin</a>.<br><br>
In addition to the mouse or touch point moving over the chart, it is also possible for the chart to move under the mouse or touch point. For example, in a smart phone, the user can view the web page in portrait or landscape mode, and the web page can be designed to layout differently in these two modes. In this case, the chart can move or resize when the phone is rotated, and the track cursor would need to update. The <a href="JsChartViewer.ChartMove.htm">JsChartViewer.ChartMove</a> event can be used to detect chart movement or resizing and update the track cursor.<br><br>
<a href="JsChartViewer.attachHandler.htm">JsChartViewer.attachHandler</a> can be used to attach a function as the handler to these events. This should be performed only after the chart is loaded. It is recommended that the code to attach the event handler be executed in the &lt;body&gt; or window onload event handler of the web page.
</div><p class="heading1a">JsChartViewer Drawing Methods</p><div class="content">
To facilitate drawing track cursors, <a href="JsChartViewer.htm">JsChartViewer</a> includes a number of methods to draw lines, rectangles and text over the chart as follows.<br><br>
<div style="width:100%;box-sizing:border-box;"><table width="100%" border="1" cellpadding="5" cellspacing="0"> <tr><th width="33%">Method<th>Description
<tr><td><a href="JsChartViewer.drawHLine.htm">JsChartViewer.drawHLine</a><td>Draws a horizontal line on the chart. <tr><td><a href="JsChartViewer.drawVLine.htm">JsChartViewer.drawVLine</a><td>Draws a vertical line on the chart. <tr><td><a href="JsChartViewer.showCrossHair.htm">JsChartViewer.showCrossHair</a><td>Displays the crosshair cursor. <tr><td><a href="JsChartViewer.showTextBox.htm">JsChartViewer.showTextBox</a><td>Draws a textbox on the chart. <tr><td><a href="JsChartViewer.showClickableTextBox.htm">JsChartViewer.showClickableTextBox</a><td>Draws a clickable textbox on the chart. <tr><td><a href="JsChartViewer.hideObj.htm">JsChartViewer.hideObj</a><td>Hides one or more objects drawn by JsChartViewer. <tr><td><a href="JsChartViewer.setAutoHide.htm">JsChartViewer.setAutoHide</a><td>Hides one or more objects drawn by JsChartViewer when a certain event occurs. <tr><td><a href="JsChartViewer.removeAutoHide.htm">JsChartViewer.removeAutoHide</a><td>Cancels the automatic action sets up by JsChartViewer.setAutoHide. <tr><td><a href="JsChartViewer.htmlRect.htm">JsChartViewer.htmlRect</a><td>Generates HTML code that represents an inline color box.
</table></div></div><p class="heading1a">Snapping to the Nearest X Data Position</p><div class="content">
Very often, the track cursor is not drawn exactly at the interaction position, but is drawn at the data point position nearest to the interaction position in the x direction. ChartDirector includes a method <a href="JsXYChart.getNearestXValue.htm">JsXYChart.getNearestXValue</a>, which will search all data in the chart to get the x data value nearest to a given point. This value can then be used to obtain the x pixel coordinate (using <a href="JsXYChart.getXCoor.htm">JsXYChart.getXCoor</a>) for drawing the track cursor. It can also be used to look up the data points (using <a href="JsLayer.getXIndexOf.htm">JsLayer.getXIndexOf</a>) so as to draw dots that track the data points, generate dynamic data labels, axis labels or legend entries.
</div><p class="heading1a">Files Required for Javascript Chart Viewer</p><div class="content">
To use the <a href='JsChartViewer.htm'>Javascript Chart Viewer</a>, your web site would need to contain the following files, which should be in the same directory. In your web page, please include a &lt;script&gt; tag to load "cdjcv.js".<br><br>
<div style="width:100%;box-sizing:border-box;"><table width="100%" border="1" cellpadding="5" cellspacing="0"> <tr><th width="38%">Filename<th>Description <tr><td>cdjcv.js<td>The main Javascript library file. <tr><td>wait.gif<td>Rotating clock wait symbol. <tr><td>spacer.gif<td>A 1-pixel transparent image. <tr><td>zoomin.cur<td>Zoom in cursor. <tr><td>zoomin.cur<td>Zoom out cursor. </table></div></div><p class="heading1a">Sample Track Cursors</p><div class="content">
ChartDirector includes a number of sample drawing routines in its sample code. You may reuse them, or modify them for your own needs. You may also develop your own track cursor drawing code to implement the track cursor behaviour you want.<br><br>
<div style="width:100%;box-sizing:border-box;"><table width="100%" border="1" cellpadding="5" cellspacing="0"> <tr><th width="33%">Sample Code<th>Description
<tr><td><a href="tracklegendweb.htm">Track Line with Legend</a><td>Demonstrates a track cursor that consists of a vertical line snapped to the nearest x data position. There are dots to highlight the nearest data points, and a dynamically updated legend showing their values.
<tr><td><a href="tracklabelweb.htm">Track Line with Data Labels</a><td>Demonstrates a track cursor that consists of a vertical line snapped to the nearest x data position with a floating x-axis label. There are also dots to highlight the nearest data points, with labels beside them displaying their values.
<tr><td><a href="trackaxisweb.htm">Track Line with Axis Labels</a><td>Demonstrates a track cursor that uses horizontal and vertical lines to connect the nearest data points to the x-axis and y-axis, with floating axis labels showing their values.
<tr><td><a href="trackvlegendweb.htm">Track Line with Vertical Legend</a><td>Demonstrates a track cursor that consists of a vertical line snapped to the nearest x data position. There are dots to highlight the nearest data points, and a dynamically updated vertical legend showing their values. The legend box is put on the left side of the plot area if the track cursor is on the right side and vice versa. This ensures the legend box would not block the region near the track cursor.
<tr><td><a href="trackboxweb.htm">Track Box with Floating Legend</a><td>Demonstrates a track cursor that consists of a rectangle enclosing the slot corresponding to the nearest x-axis label. A floating legend box that moves with the mouse cursor is used to display the data values in that slot.
<tr><td><a href="crosshairweb.htm">Crosshair with Axis Labels</a><td>Demonstrates a track cursor that consists of a vertical line and a horizontal line at the mouse cursor position, thereby forming a crosshair. Floating axis labels are used to display the cursor position.
<tr><td><a href="trackfinanceweb.htm">Finance Chart Track Line</a><td>This is similar to <a href="tracklegendweb.htm">Track Line with Legend</a>, but is modified to apply to the <a href="FinanceChart.htm">FinanceChart</a> object.
<tr><td><a href="zoomscrolltrackweb.htm">Zooming and Scrolling with Track Line</a><td>Demonstrates how to apply track cursors to a Zoomable and Scrollable chart. The track cursor drawing code is the same as that in <a href="tracklegendweb.htm">Track Line with Legend</a>.
<tr><td><a href="viewportcontroldemoweb.htm">Zooming and Scrolling with Viewport Control</a><td>Demonstrates how to apply track cursors to a Zoomable and Scrollable chart. The track cursor drawing code is the similar to that in <a href="tracklegendweb.htm">Track Line with Legend</a>.
<tr><td><a href="realtimetrackweb.htm">Real-Time Chart with Track Line</a><td>Demonstrates how to apply track cursors to a Realtime chart. The track cursor drawing code is the same as that in <a href="tracklegendweb.htm">Track Line with Legend</a>.
</table></div></div><br>
<hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div></body>
</HTML>
